<template>
  <el-dialog
    title="添加货物类型"
    :visible.sync="dialogVisible"
    width="808px"
    class="dialogTitle"
    @closed="cancelBtnClick('addForm')"
  >
    <el-form label-width="120px" ref="addForm" :model="dialogData" :rules="rules">
      <el-form-item label="货物类型" prop="goodsType">
        <el-input v-model.trim="dialogData.goodsType"></el-input>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <cs-btn
        type="primary"
        @click.native="confirmBtnClick('addForm')"
        btnText="确定"
        class="confirm_btn dialog_btn"
        :buttonStatus="buttonStatus"
      />
      <cs-btn @click.native="cancelBtnClick('addForm')" btnText="取消" class="dialog_btn" />
    </div>
  </el-dialog>
</template>

<script>
import csBtn from '@/components/cs-btn/cs-btn.vue'

import { addGoodsType } from '@/service/operate/goodsType_manage/goodsType_manage'

export default {
  name: 'goodsTypeManageAddGoodsType',
  components: {
    csBtn
  },
  created() {
    this.$bus.$on('displayAddGoodsTypeDialog', () => {
      this.dialogVisible = true
    })
  },
  beforeDestroy() {
    this.$bus.$off('addGoodsTypeSuccess')
  },
  data() {
    return {
      dialogVisible: false,
      buttonStatus: false,
      dialogData: {
        goodsType: ''
      },
      rules: {
        goodsType: [{ required: true, message: '请输入货物类型', trigger: 'blur' }]
      }
    }
  },
  methods: {
    async confirmBtnClick() {
      this.buttonStatus = true
      const data = await addGoodsType({ goodsType: this.dialogData.goodsType })
      console.log(data)
      if (data.code === 0) {
        this.$bus.$emit('addGoodsTypeSuccess')
        this.$message({
          message: '添加货物类型成功',
          type: 'success'
        })
        this.dialogVisible = false
        setTimeout(() => {
          this.buttonStatus = false
        }, 500)
      } else if (data.code === 1) {
        this.$message.error(data.msg)
        setTimeout(() => {
          this.buttonStatus = false
        }, 500)
      }
    },
    cancelBtnClick(addForm) {
      this.$refs[addForm].resetFields()
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
/* 对话框样式start */

.el-form-item >>> .el-form-item__label {
  padding: 0;
  padding-right: 46px;
  color: #888888;
}

.el-input >>> .el-input__inner {
  border-radius: 0;
}

.el-textarea >>> .el-textarea__inner {
  border-radius: 0;
}

.dialogTitle >>> .el-dialog {
  padding: 6px 10px 18px 10px !important;
}

/* 对话框样式end */
</style>
